<style scoped lang="less">
.main {
  //   overflow-x: hidden;
  background-image: white;
  .logo-con {
    height: 100px;
    margin: 40px 0px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    color: white;
    .logo {
      height: 60px;
      width: 60px;
      border: 1px solid white;
      text-align: center;
      line-height: 60px;
      margin-right: 70px;
    }
  }
  .layout-ceiling-main {
    float: right;
  }
  .layout-breadcrumb {
    // float: left;
    width: 50%;
  }
  .breadcrumb_item {
    float: left;
  }
  .tag-nav-wrapper {
    padding: 0;
    height: 46px;
    background: #f0f0f0;
    overflow: hidden;
  }
  .menu-icon {
    transition: all 0.3s;
    color: white;
    cursor: pointer;
  }
  .rotate-icon {
    transform: rotate(-180deg);
  }
}
.top,
.bottom {
  text-align: center;
}
.center {
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
}
.center-left {
  float: left;
}
.center-right {
  float: right;
}
.layout-footer-center {
  text-align: center;
  // position: fixed;
  width: 100%;
  // right: 400px;
  // left: 260px;
  bottom: 0;
  // background-color: white;
}
.layout_main {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  min-width: 400px;
  padding-right: 10px;
}
.layout_content {
  height: 94%;
  margin-left: 20px;
  width: 98%;
}
.logo {
  height: 60px;
  width: 60px;
  border: 1px solid white;
  text-align: center;
  line-height: 60px;
  color: white;
}
.logo_role {
  height: 60px;
  width: 110px;
  // border: 1px solid white;
  text-align: center;
  line-height: 60px;
  color: white;
}
</style>
<template>
  <!-- <Layout style="height:100%;" class="main"> -->
  <!-- <Sider
      breakpoint="xxl"
      ref="side1"
      hide-trigger
      collapsible
      :collapsed-width="collapsedWidth"
      :width="260"
      v-model="isCollapsed"
    >
      <div class="logo-con" v-show="!isCollapsed">
        <div class="logo">LOGO</div>
        <div style="cursor:pointer;">
          <Dropdown
            placement="bottom-start"
            trigger="click"
            @on-click="dropdown"
            style="margin-left:5px;"
          >
            <span>
              <Icon size="16" type="ios-contact" />
              &nbsp;{{RoleName}}
              <Icon type="ios-arrow-down"></Icon>
            </span>
            <Dropdown-menu slot="list">
              <Dropdown-item name="exit">
                <Badge color="white" text="退出登录" />
              </Dropdown-item>
              <Dropdown-item name="switch">
                <Badge color="white" text="切换用户" />
              </Dropdown-item>
              <Dropdown-item name="update">
                <Badge :color="isNeedUpdate" text="软件更新" />
              </Dropdown-item>
            </Dropdown-menu>
          </Dropdown>
        </div>
      </div>
      <side-menu
        :active-name="$route.name"
        :menu-list="menuList"
        @on-select="turnToPage"
        :className="menuitemClasses"
        :isCol="isCollapsed"
      ></side-menu>
  </Sider>-->
  <!-- <Content style="height:100%"> -->
  <!-- <Layout style="height: 100%; position:relative"> -->
  <!-- <Header
          style="background: white; padding: 0px 10px;display: flex;justify-content: space-between; align-items:center"
        >
          <div style="display: flex; justify-content:flex-start;">
            <Tooltip content="展开/折叠" placement="right">
              <Icon
                type="md-reorder"
                size="30"
                @click.native="collapsedSider_menu"
                style="cursor:pointer"
              />
            </Tooltip>
            <Breadcrumb style="line-height: 56px;margin-left:16px">
              <Breadcrumb-item class="breadcrumb_item" to="/info">
                <Icon type="md-home" />首页
              </Breadcrumb-item>
              <Breadcrumb-item v-for="item in crumbList" :key="item">{{item}}</Breadcrumb-item>
            </Breadcrumb>
          </div>
          <Tooltip content="展开/折叠" placement="left" v-show="$route.meta.isShowSider">
            <Icon
              @click.native="collapsedSider"
              type="md-reorder"
              size="30"
              style="cursor:pointer"
            />
          </Tooltip>
        </Header>
        <div class="tag-nav-wrapper">
          <tags-nav
            :value="$route"
            @input="handleClick"
            :list="tagNavList"
            @on-close="handleCloseTag"
          />
  </div>-->
  <!-- <Content style="height:100%;"> -->
  <!-- <Layout> -->
  <!-- <Content> -->
  <!-- <keep-alive>
        <router-view name="list" />
  </keep-alive>-->
  <!-- </Content> -->
  <!-- </Layout> -->
  <!-- </Content> -->
  <!-- <Footer class="layout-footer-center">
          <div>版本 &copy; {{util.version}}</div>
  </Footer>-->
  <!-- </Layout> -->
  <!-- </Content> -->
  <!-- <Sider
      breakpoint="xl"
      ref="side2"
      reverse-arrow
      hide-trigger
      collapsible
      collapsed-width="0"
      v-model="isCollapsed_detail"
      v-show="$route.meta.isShowSider"
      style="height:100%;background-color: white"
      :width="400"
    >
      <div style="height: 100%;">
        <keep-alive>
          <router-view name="detail" :isCol="isCollapsed_detail" />
        </keep-alive>
      </div>
    </Sider>

    <Modal v-model="reviseModal" width="360" :mask-closable="false">
      <p slot="header" style="text-align:center;">
        <Icon type="ios-construct" />
        <span>修改密码</span>
      </p>
      <div style="text-align:center">
        <Form
          ref="reviseForm"
          :model="reviseForm"
          :rules="reviseRule"
          :label-width="70"
          label-position="left"
        >
          <Form-item label="原密码" prop="oldPwd">
            <Input type="password" v-model="reviseForm.oldPwd" />
          </Form-item>
          <Form-item label="新密码" prop="newPwd">
            <Input type="password" v-model="reviseForm.newPwd" />
          </Form-item>
          <Form-item label="确认密码" prop="newPwd2">
            <Input type="password" v-model="reviseForm.newPwd2" />
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <Button type="success" long @click="reset('reviseForm')">修改</Button>
      </div>
  </Modal>-->
  <!-- </Layout> -->
  <Layout style="height:100%;" class="main">
    <Sider
      ref="side1"
      collapsible
      :collapsed-width="collapsedWidth"
      :width="260"
      v-model="isCollapsed"
      style="height:100%;
    "
    >
      <div
        style="height:20%; display:flex; flex-flow: row nowrap;justify-content: space-around;align-items:center"
      >
        <div class="logo" v-show="!isCollapsed">
          <strong>LOGO</strong>
        </div>
        <div class="logo_role">
          <Dropdown
            placement="bottom-start"
            trigger="click"
            @on-click="dropdown"
            style="margin-left:5px;cursor: pointer;"
          >
            <Icon size="20" type="ios-contact" />
            <span v-show="!isCollapsed">
              &nbsp;{{ RoleName }}
              <Icon type="ios-arrow-down"></Icon>
            </span>
            <!-- <Dropdown-menu slot="list">
              <Dropdown-item name="exit">
                <Badge color="white" text="退出登录" />
              </Dropdown-item>
              <Dropdown-item name="switch">
                <Badge color="white" text="切换用户" />
              </Dropdown-item>
              <Dropdown-item name="update">
                <Badge :color="isNeedUpdate" text="软件更新" />
              </Dropdown-item>
            </Dropdown-menu> -->
          </Dropdown>
        </div>
      </div>
      <side-menu
        :active-name="$route.name"
        :menu-list="menuList"
        @on-select="turnToPage"
        :className="menuitemClasses"
        :isCol="isCollapsed"
      ></side-menu>
    </Sider>
    <Layout>
      <Content class="layout_main">
        <div class="layout_content">
          <keep-alive>
            <router-view name="list" />
          </keep-alive>
        </div>
      </Content>

      <Footer class="layout-footer-center">
        <div>版本 &copy; {{ util.version }}</div>
      </Footer>
    </Layout>
    <Sider
      v-show="$route.meta.isShowSider"
      width="370"
      style="height:94%;background-color:white;margin:auto 30px;border-radius: 10px;overflow-y:auto;overflow-x:hidden"
    >
      <keep-alive>
        <router-view name="detail" :isCol="isCollapsed_detail" />
      </keep-alive>
    </Sider>
  </Layout>
</template>

<script>
import sideMenu from "./components/side-menu";
import menuArr from "../../libs/menuArr";
// import { loginOut } from "../../api/user";
import { getNextName, addTag } from "../../libs/tools";
import tagsNav from "./components/tags-nav";
export default {
  components: { sideMenu, tagsNav },
  inject: ["reload", "globalData"],
  data() {
    return {
      RoleName: "",
      hideTrigger: false,
      isCollapsed: true,
      isCollapsed_detail: false,
      collapsedWidth: 78,
      isNeedUpdate: "red",
      reviseModal: false,
      reviseForm: {
        oldPwd: "",
        newPwd: "",
        newPwd2: "",
      },
      reviseRule: {
        oldPwd: [{ required: true, message: "请填写原密码", trigger: "blur" }],
        newPwd: [{ required: true, message: "请填写新密码", trigger: "blur" }],
        newPwd2: [
          { required: true, message: "请再次确认新密码", trigger: "blur" },
        ],
      },
      currentRouterName: "",
      currentTabComponent: "",
    };
  },
  computed: {
    menuList() {
      return menuArr.getMenuArr(
        this.globalData.Menus
        // this.globalData.userInfo.isSystem
      );
    },
    crumbList() {
      return this.selectCrumbArr(this.currentRouterName);
    },
    tagNavList() {
      return this.globalData.tagList;
    },
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
  },
  watch: {
    $route(newRoute) {
      addTag(newRoute, this.globalData.tagList);
    },
  },
  methods: {
    collapsedSider_menu() {
      this.$refs.side1.toggleCollapse();
    },
    collapsedSider() {
      this.$refs.side2.toggleCollapse();
    },
    turnToPage(name) {
      this.currentRouterName = name;
      this.$router.push({
        name: name,
      });
    },
    //处理面包屑
    selectCrumbArr(name) {
      let crumbList;
      if (name.indexOf("-") !== -1) {
        let arr = name.split("-");
        crumbList = [arr[0], arr[1]];
      }
      return crumbList;
    },
    exit() {
      this.$Modal.confirm({
        title: "提示",
        width: 300,
        content: "是否退出管理后台？",
        onOk: () => {
          loginOut().then((data) => {
            if (data.Code == 0) {
              sessionStorage.removeItem("Token");
              this.$root.Socket.close();
              window.location.href = "/#/";
            }
          });
        },
      });
    },
    reset(name) {
      if (this.reviseForm.newPwd !== this.reviseForm.newPwd2) {
        return this.$Message.error("前后密码不一致！");
      }
      this.$refs[name].validate((valid) => {
        if (valid) {
          changePwd(this.reviseForm).then((data) => {
            if (data.code === 200) {
              this.$Message.success("修改成功,请重新登录!");
              this.$router.push("/");
            }
          });
        } else {
          this.$Message.error("请填写完整!");
        }
      });
    },
    revise: function() {
      this.reviseModal = true;
    },
    dropdown(item) {
      switch (item) {
        case "revise":
          this.revise();
          break;
        case "exit":
          this.exit();
          break;
        case "userBind":
          this.userBind();
          break;
      }
    },
    handleCloseTag(res, type, name) {
      let nextItem = getNextName(this.tagNavList, name);
      this.setTagNavList(res);
      if (type === "all") {
        this.turnToPage("首页");
      } else if (type === "current") {
        this.turnToPage(nextItem);
      }
    },
    handleClick(item) {
      this.turnToPage(item.name);
    },
    setTagNavList(list) {
      this.globalData.tagList = list;
      localStorage.setItem("tagNaveList", JSON.stringify(list));
    },
    installTagList() {
      let tagList = JSON.parse(localStorage.getItem("tagNaveList"));
      if (tagList && tagList.length) {
        this.globalData.tagList = tagList;
      }
    },
  },
  created() {
    this.reload();
    // this.installTagList();
    this.RoleName = sessionStorage.getItem("NickName");
    this.currentRouterName = this.$route.name;
  },
};
</script>
